<template>
	<view class="container">
		<u--form :labelStyle="{fontSize: '28rpx', color: '#312C2A', height: '80rpx'}" labelWidth="100"
			labelPosition="left" errorType="toast">
			<view class="form">

				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a30.png')" ></u-image>
							<view class="">姓名</view>
						</view>
						<view class="right">{{model.name}}</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a44.png')" ></u-image>
							<view class="">性别</view>
						</view>
						<view class="right">{{ model.sexName }}</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a31.png')" ></u-image>
							<view class="">手机号</view>
						</view>
						<view class="right">{{ model.mobile }}</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a45.png')" ></u-image>
							<view class="">住址</view>
						</view>
						<view class="right">{{ model.address }}</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a46.png')" ></u-image>
							<view class="">身份证号</view>
						</view>
						<view class="right">{{ model.id_card }}</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a47.png')" ></u-image>
							<view class="">既往病史</view>
						</view>
						<view class="right">{{ model.medical_history }}</view>
					</view>
				</u-form-item>
				<u-form-item borderBottom>
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a48.png')" ></u-image>
							<view class="">遗传史</view>
						</view>
						<view class="right">{{ model.genetic_history }}</view>
					</view>
				</u-form-item>
				<u-form-item :borderBottom="false">
					<view class="form-item">
						<view class="left">
							<u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a49.png')" ></u-image>
							<view class="">就诊人关系</view>
						</view>
						<view class="right">{{ model.relationship }}</view>
					</view>
				</u-form-item>
			</view>
		</u--form>

		<!-- 就诊记录 -->
		<view class="record-list">
			<view class="recore-item" v-for="(item ,i) in caseList" :key="i" @tap="goDetail">
				<view class="left">
					<view class="">就诊记录</view>
					<view class="time">{{ item.treatment_date }}</view>
				</view>
				<view class="right" @tap="handleToVisitDetail(item)">
					<view class="">查看详情</view>
					<u-icon name="arrow-right" color="#B3BCCC" size="14"></u-icon>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
    import {ref, reactive, readonly} from 'vue'
    import {onLoad, onShow, onReady} from '@dcloudio/uni-app'
    import {getPatient, getPatientCases } from "@/api/user";
    import {getServerStatic} from "@/utils/tool";

    const model = ref({
        name: '',
        sex: '',
        sexName: '',
        id_card: '',
        age: '',
        mobile: '',
        address: '',
        medical_history: '',
        genetic_history: '',
        relationship: '',
        is_myself: 0
    })

    // 就诊记录
    const caseList = ref([])

    const patientId = ref(0)

    onLoad((evt) => {
        patientId.value = evt?.patient_id ?? 0
        if (patientId.value > 0) {
            handleGetPatient()
            handleGetPatientCase()
        }
    })

    // 就诊人详情
    const handleGetPatient = async () => {
        const {code, data, message} = await getPatient({id: patientId.value})
        if (code == 1) {
            model.value.name = data.name
            model.value.sex = data.sex
            model.value.age = data.age
            model.value.sexName = data.sex == 1 ? '男' : '女'
            model.value.mobile = data.mobile
            model.value.id_card = data.id_card ?? ''
            model.value.medical_history = data.medical_history ?? ''
            model.value.genetic_history = data.genetic_history ?? ''
            model.value.address = data.address ?? ''
            model.value.relationship = data.relationship ?? ''
            model.value.is_myself = data.is_myself
        } else {
            uni.showToast({
                mask: true,
                title: '获取数据异常',
                icon: 'error'
            })
            setTimeout(() => {
                goBack()
            },500)
        }
    }

    // 就诊记录
    const handleGetPatientCase = async () => {
        const {code, data, message} = await getPatientCases({patient_id: patientId.value})
        if (code == 1) {
            caseList.value = data
        }
    }

    const handleToVisitDetail = (item) => {
        uni.navigateTo({
            url: `/mine/medical/detail?case_id=${item.id}`
        })
    }
</script>

<style lang="scss" scoped>
	.container {
		padding: 50rpx 26rpx;

		.form {
			padding: 0 44rpx;
			background: #FFFFFF;
			border-radius: 30rpx;

			.form-item {
				@include between(100%);
				padding: 10rpx 0;

				.left {
					@include start(220rpx);

					&>view {
						color: #B3BCCC;
						font-size: 28rpx;
						margin-left: 16rpx;
					}
				}

				.right {
					width: 350rpx;
					font-size: 28rpx;
					color: #312C2A;
					text-align: right;
				}
			}
		}
	}

	.record-list {
		margin-top: 30rpx;
		.recore-item {
			@include between(100%);
			padding: 38rpx 40rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			.left {
				@include start();
				color: #606672;
				.time {
					margin-left: 20rpx;
				}
			}
			.right {
				@include start();
				color: #B3BCCC;
				& > view {
					margin-right: 14rpx;
				}
			}
		}
	}

	.self-set {
		@include end(100%);
	}
</style>
